<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import getTableData from '/@/utils/getTableData';
import {
	// sysOrgList,
	getAccidentListApi,
	addAccidentListApi,
	delAccidentListApi,
	getAccidentListDetailApi,
	updateAccidentListApi,
	getChangeLogAreaApi,
	getAccidentListApplyApi,
	getAccidentListWithdrawApi,
} from '/@/api/sms/HazardousChemicalsInterface';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import commonProcessTemplate from '/@/components/workFlow/commonProcessTemplate.vue';
import SearchModel from '/@/views/sms/component/search-model.vue';
import { exportToExcel } from '/@/utils/exportToExcel';
import { sysFileInfoPreviewBase64 } from '/@/api/centerControl/pubilc';
import uploadFile from '/@/views/sms/component/reviseUploadFile.vue';
const showDialogVisible = ref(false);
let searchObj: any = reactive({});

const options1 = [
	{
		value: 0,
		label: '待提交',
	},
	{
		value: 1,
		label: '审核中',
	},
	{
		value: 2,
		label: '审核通过',
	},
	{
		value: 3,
		label: '撤回',
	},
	{
		value: 4,
		label: '驳回',
	},
	{
		value: 5,
		label: '审核不通过',
	},
];

const ruleForm: any = reactive({
	d_AccidentTime: '', //事故时间
	v_AccidentAddress: '', //事故地点
	v_CompanyName: '', //单位名称
	v_AccidentName: '', //事故名称
	n_DeathNumber: 0, //死亡人数
	n_InjuredNumber: 0, //受伤人数
	n_MissingNumber: 0, //失踪人数
	n_HelperName: '', //领导姓名
	n_DepartmentsName: '', //部门名称
	n_Remark: '', //其他
});

/***** searchClick 查询按钮 *****/
const searchClick = () => {
	let newObj = Object.keys(searInfo.value);
	if (newObj.length !== 0) {
		newObj.map((i: any) => {
			searchObj[i] = searInfo.value[i];
		});
	}
};

/***** resetClick 重置按钮 *****/
const resetClick = () => {
	searInfo.value = {};
	let newObj = Object.keys(searchObj);
	if (newObj.length !== 0) {
		newObj.map((i: any) => {
			searchObj[i] = '';
			// console.log(i);
		});
	}
	initInfoFun();
};

/***** addNodeClick 新增 *****/
const addNodeClick = async () => {
	showDialogVisible.value = true;
};

/***** nodeClick 编辑 *****/
const options3: any = ref([]);
const saveId = ref();
const nodeClick = async (row: any) => {
	console.log(row);
	if (row.n_Id) {
		saveId.value = row.n_Id;
		getAccidentListDetailApi({ N_Id: row.n_Id }).then((res) => {
			console.log(res);
			ruleForm.d_AccidentTime = res.data.d_AccidentTime; //事故时间
			ruleForm.v_AccidentAddress = res.data.v_AccidentAddress; //事故地点
			ruleForm.v_CompanyName = res.data.v_CompanyName; //单位名称
			ruleForm.v_AccidentName = res.data.v_AccidentName; //事故名称
			ruleForm.n_DeathNumber = res.data.n_DeathNumber; //死亡人数
			ruleForm.n_InjuredNumber = res.data.n_InjuredNumber; //受伤人数
			ruleForm.n_MissingNumber = res.data.n_MissingNumber; //失踪人数
			ruleForm.n_HelperName = res.data.n_HelperName; //领导姓名
			ruleForm.n_DepartmentsName = res.data.n_DepartmentsName; //部门名称
			ruleForm.n_Remark = res.data.n_Remark; //其他
		});
		showDialogVisible.value = true;
	}
};

/*** deleteHandle 删除数据事件 */
const deleteHandle = async (val: String | Number, updateFun: Function) => {
	ElMessageBox.confirm('请确定删除此条数据', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			let param = { n_Id: val };
			try {
				let res: any = await delAccidentListApi(param);
				if (res.success) {
					updateFun();
				}
			} catch (err) {
				return;
			}
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '删除失败',
			});
		});
};

/*** detailHandle 查看详情事件 */
const showDetailDialogVisible = ref(false);
const tableData = ref();
const detailHandle = async (item: any) => {
	const res = await getAccidentListDetailApi({ N_Id: item.n_Id });
	console.log(res);
	tableData.value = res.data;
	showDetailDialogVisible.value = true;
};
const cancelDetailClick = () => {
	showDialogVisible.value = false;
};

/*** cancelUseClick  弹窗取消事件 */
const cancelUseClick = () => {
	showDialogVisible.value = false;
	showWorkFlowDialogVisible.value = false;
	saveId.value = 0;
	ruleForm.d_AccidentTime = ''; //事故时间
	ruleForm.v_AccidentAddress = ''; //事故地点
	ruleForm.v_CompanyName = ''; //单位名称
	ruleForm.v_AccidentName = ''; //事故名称
	ruleForm.n_DeathNumber = 0; //死亡人数
	ruleForm.n_InjuredNumber = 0; //受伤人数
	ruleForm.n_MissingNumber = 0; //失踪人数
	ruleForm.n_HelperName = ''; //领导姓名
	ruleForm.n_DepartmentsName = ''; //部门名称
	ruleForm.n_Remark = ''; //其他
};
/*** controlUseClick  弹窗提交事件 */
const controlUseClick = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			if (saveId.value) {
				updateAccidentListApi({ ...ruleForm, n_Id: saveId.value });
			} else {
				addAccidentListApi(ruleForm);
			}
			setTimeout(() => {
				cancelUseClick();
				getData();
			}, 100);
		} else {
			console.log('error submit!', fields);
		}
	});
};

/*** ruleFormRef  表单校验 */
const ruleFormRef = ref();
const rules = reactive({
	d_AccidentTime: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	v_AccidentAddress: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	v_CompanyName: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	v_AccidentName: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	n_DeathNumber: [{ required: true, message: '内容不能为空', trigger: 'blur' },{pattern:/^[0-9]\d*$/,message:'请输入正整数',trigger: 'blur'}],
	n_InjuredNumber: [{ required: true, message: '内容不能为空', trigger: 'blur' },{pattern:/^[0-9]\d*$/,message:'请输入正整数',trigger: 'blur'}],
	n_MissingNumber: [{ required: true, message: '内容不能为空', trigger: 'blur' },{pattern:/^[0-9]\d*$/,message:'请输入正整数',trigger: 'blur'}],
});

/*** 初始化数据 */
const basicsInfo: any = ref([]);
const initInfoFun = () => {
	basicsInfo.value = [
		{
			typeId: 'v_AccidentAddress', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
			typeNam: '', // 输入类型(number,text等) --- 选填
			searchVal: 'V_AccidentAddress', // 查询字段 --- 必填
			defaultVal: '', // 字段默认值 --- 选填
			placeholder: '事故地点', // placeholder数据
			defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
			eventType: '', // 事件类型（如burl/change等） --- 选填
			defaultEvent: '', // 事件名称 --- 选填
		},
		{
			typeId: 'v_CompanyName', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
			typeNam: '', // 输入类型(number,text等) --- 选填
			searchVal: 'V_CompanyName', // 查询字段 --- 必填
			defaultVal: '', // 字段默认值 --- 选填
			placeholder: '单位名称', // placeholder数据
			defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
			eventType: '', // 事件类型（如burl/change等） --- 选填
			defaultEvent: '', // 事件名称 --- 选填
		},
		{
			typeId: 'v_AccidentName', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
			typeNam: '', // 输入类型(number,text等) --- 选填
			searchVal: 'V_AccidentName', // 查询字段 --- 必填
			defaultVal: '', // 字段默认值 --- 选填
			placeholder: '事故名称', // placeholder数据
			defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
			eventType: '', // 事件类型（如burl/change等） --- 选填
			defaultEvent: '', // 事件名称 --- 选填
		},
		{
			typeId: 'n_FlowinstanceState', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
			typeNam: '', // 输入类型(number,text等) --- 选填
			searchVal: 'N_FlowinstanceState', // 查询字段 --- 必填
			defaultVal: '', // 字段默认值 --- 选填
			placeholder: '流程状态', // placeholder数据
			defaultProp: options1, // 下拉框中使用，除下拉框外其它情况为空 --- 选填
			eventType: '', // 事件类型（如burl/change等） --- 选填
			defaultEvent: '', // 事件名称 --- 选填
		},
	];
};

const searInfo: any = ref();
const searchHandel = (val: any) => {
	searInfo.value = val;
};

//创建工作流申请
const typeCode = 'AccidentReportFlowTypeCode';
let res1: any, res2: any;
const ueseIdInfo = (val: any) => {
	console.log(val.value);
	res1 = val.value;
};
const modelIdInfo = (val: any) => {
	res2 = val;
};

const showWorkFlowDialogVisible = ref(false);
const createWorkFlowClick = (item: any) => {
	console.log(item);
	saveId.value = item.n_Id;
	getAccidentListDetailApi({ N_Id: item.n_Id }).then((res) => {
		console.log(res);
		ruleForm.d_AccidentTime = res.data.d_AccidentTime; //事故时间
		ruleForm.v_AccidentAddress = res.data.v_AccidentAddress; //事故地点
		ruleForm.v_CompanyName = res.data.v_CompanyName; //单位名称
		ruleForm.v_AccidentName = res.data.v_AccidentName; //事故名称
		ruleForm.n_DeathNumber = res.data.n_DeathNumber; //死亡人数
		ruleForm.n_InjuredNumber = res.data.n_InjuredNumber; //受伤人数
		ruleForm.n_MissingNumber = res.data.n_MissingNumber; //失踪人数
		ruleForm.n_HelperName = res.data.n_HelperName; //领导姓名
		ruleForm.n_DepartmentsName = res.data.n_DepartmentsName; //部门名称
		ruleForm.n_Remark = res.data.n_Remark; //其他

		showWorkFlowDialogVisible.value = true;
	});
};

const controlWorkFlowClick = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			let prams = {
				id: saveId.value,
				schemeId: res2,
				nextNodeDesignates: res1,
			};
			// updateAccidentListApi({ ...ruleForm, n_Id: saveId.value });
			getAccidentListApplyApi(prams);
			setTimeout(() => {
				cancelUseClick();
				getData();
			}, 10);
		}
	});
};

// 撤回申请
const revocationClick = async (val: String | Number) => {
	ElMessageBox.confirm('请确定撤回此条数据', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			let param = { id: val };
			try {
				let res: any = await getAccidentListWithdrawApi(param);
				if (res.success) {
					getData();
				}
			} catch (err) {
				return;
			}
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '撤回失败',
			});
		});
};

/*** viewClick 文件预览 */
const baseUrl = import.meta.env.VITE_API_URL;
const ideView = import.meta.env.VITE_APP_API_VIEW_IDE;
const viewClick = async (val: any) => {
	let viewUrl = baseUrl + '/' + ideView + val.path;
	window.open(viewUrl);
};
/*** downClick 下载文件 */
const downClick = async (val: any) => {
	let getFile = getFileFun(val.id);
	// 等待getFileFun完成
	await getFile;
	if (getFile && getFile.then) {
		getFile.then((res) => {
			let base64Data = res;
			let blob = base64ToBlob(base64Data);

			// 创建可下载的链接
			let url = URL.createObjectURL(blob);
			let link = document.createElement('a');
			link.href = url;
			link.download = val.fileOriginName; // 指定下载的文件名

			// 将链接添加到DOM中
			document.body.appendChild(link);

			// 触发点击事件开始下载
			link.click();

			// 释放临时URL
			URL.revokeObjectURL(url);
		});
	}
};
/*** getFileFun 获取文件数据 */
const getFileFun = async (val: Number) => {
	let param: any = {};
	param.id = val;
	let res: any = await sysFileInfoPreviewBase64(param);
	console.log(res, 'res');
	if (res.success) {
		return res.data;
	}
};
// 将Base64编码数据转换为Blob对象的辅助函数
const base64ToBlob = (base64Data: any) => {
	var byteString = atob(base64Data.split(',')[1]); // 提取Base64编码的数据部分
	var mimeString = base64Data.split(':')[1].split(';')[0]; // 提取MIME类型
	var ab = new ArrayBuffer(byteString.length);
	var ia = new Uint8Array(ab);
	for (var i = 0; i < byteString.length; i++) {
		ia[i] = byteString.charCodeAt(i);
	}
	return new Blob([ab], { type: mimeString });
};

// 附件上传
/*** 附件管理 */
const fileInfo = ref();
const fileDialog = ref(false);
const cancelFileClick = () => {
	fileDialog.value = false;
};
const controlFileClick = () => {
	fileDialog.value = false;
};
const documentClick = (val: any) => {
	console.log(val, 'val');
	val.sourceType = 10;
	val.sourceId = val.n_Id;
	val.titleCon = '附件上传';
	fileInfo.value = JSON.stringify(val);
	fileDialog.value = true;
};

/*** ================================= 导出数据函数操作 ================================= */
const excelRef: any = ref(null);
const handleExport = () => {
	if (excelRef.value) {
		if (excelRef.value.data.length !== 0) {
			let tableExcel: any = [];
			let tableArr = excelRef.value.data;
			tableArr.map((item: any) => {
				let tableObj: any = {};
				tableObj['事故地点'] = item.v_AccidentAddress ? item.v_AccidentAddress : '-';
				tableObj['单位名称'] = item.v_CompanyName ? item.v_CompanyName : '-';
				tableObj['事故名称'] = item.v_AccidentName ? item.v_AccidentName : '-';
				tableObj['流程状态'] = options1.find((i: any) => i.value === item.n_FlowinstanceState)?.label;
				tableObj['创建人'] = item.createdUserName ? item.createdUserName : '-';
				tableObj['创建时间'] = item.createdTime ? item.createdTime : '-';
				tableObj['更新人'] = item.updatedUserName ? item.updatedUserName : '-';
				tableObj['更新时间'] = item.updatedTime ? item.updatedTime : '-';
				tableExcel.push(tableObj);
			});
			exportToExcel(tableExcel, '事故管理.xlsx');
		} else {
			ElMessage({
				type: 'error',
				message: '暂无数据导出',
			});
		}
	}
};

const { handleCurrentChange, pageSize, pageNo, handleSizeChange, totalRows, list, indexMethod, loading, getData } = getTableData(getAccidentListApi, {}, searchObj);

const options4: any = ref([]);
onMounted(async () => {
	const result = await getChangeLogAreaApi();
	result.data.forEach((item: any) => {
		options3.value.push({
			value: item.id,
			label: item.v_Name,
		});
	});

	// const res4 = await sysOrgList();
	// options4.value = res4.data.map((item: any) => {
	// 	return {
	// 		label: item.name,
	// 		value: item.id,
	// 	};
	// });

	await initInfoFun();
});
</script>

<template>
	<div id="friend-merchant-manage" class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box; overflow: hidden">
		<div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px">
			<div class="search-s page-public-s" style="box-sizing: border-box">
				<el-card shadow="never" :body-style="{ paddingBottom: '0' }">
					<el-form class="box-f" ref="queryForm" :inline="true">
						<el-form-item>
							<el-button v-if="$hasPer('AccidentManagement1:add')" @click="addNodeClick" icon="ele-Plus" type="primary"> 新增 </el-button>
							<el-button v-if="$hasPer('AccidentManagement7:excel')" @click="handleExport" icon="ele-Download"> 导出数据 </el-button>
						</el-form-item>
					</el-form>
				</el-card>
			</div>

			<div style="box-sizing: border-box" class="flex-1 pos-r">
				<div class="pos-a w-h-100" style="box-sizing: border-box">
					<el-card class="box-card w-h-100" shadow="never" style="margin-top: 16px">
						<div style="" class="w-h-100 ver-flex">
							<div class="flex-1 pos-r">
								<div class="pos-a w-h-100">
									<el-table ref="excelRef" :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
										<el-table-column type="index" label="序号" width="55" :show-overflow-tooltip="true" align="center" :index="indexMethod" />

										<el-table-column min-width="120" :show-overflow-tooltip="true" align="center" label="事故地点">
											<el-table-column min-width="120" :show-overflow-tooltip="true" align="center">
												<template #header>
													<SearchModel typeId="v_AccidentAddress" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
												</template>
												<template #default="{ row }">
													{{ row.v_AccidentAddress }}
												</template>
											</el-table-column>
										</el-table-column>

										<el-table-column min-width="120" :show-overflow-tooltip="true" label="单位名称" align="center">
											<el-table-column min-width="120" :show-overflow-tooltip="true" align="center">
												<template #header>
													<SearchModel typeId="v_CompanyName" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
												</template>
												<template #default="{ row }">
													{{ row.v_CompanyName }}
												</template>
											</el-table-column>
										</el-table-column>
										<el-table-column min-width="120" :show-overflow-tooltip="true" label="事故名称" align="center">
											<el-table-column min-width="120" :show-overflow-tooltip="true" align="center">
												<template #header>
													<SearchModel typeId="v_AccidentName" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
												</template>
												<template #default="{ row }">
													{{ row.v_AccidentName }}
												</template>
											</el-table-column>
										</el-table-column>
										<el-table-column min-width="120" :show-overflow-tooltip="true" label="流程状态" align="center">
											<el-table-column min-width="120" :show-overflow-tooltip="true" align="center">
												<template #header>
													<SearchModel typeId="n_FlowinstanceState" typeVal="select" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
												</template>
												<template #default="{ row }">
													{{ options1.find((item: any) => item.value === row.n_FlowinstanceState)?.label }}
												</template>
											</el-table-column>
										</el-table-column>

										<el-table-column min-width="120" :show-overflow-tooltip="true" prop="createdTime" label="创建时间" align="center" />
										<el-table-column min-width="120" :show-overflow-tooltip="true" prop="createdUserName" label="创建人" align="center" />
										<el-table-column min-width="120" :show-overflow-tooltip="true" prop="updatedTime" label="更新时间" align="center">
											<template #default="scope">
												<span v-if="scope.row.updatedTime">{{ scope.row.updatedTime }}</span>
												<span v-else> - </span>
											</template>
										</el-table-column>
										<el-table-column min-width="120" :show-overflow-tooltip="true" prop="updatedUserName" label="更新人" align="center">
											<template #default="scope">
												<span v-if="scope.row.updatedUserName">{{ scope.row.updatedUserName }}</span>
												<span v-else> - </span>
											</template>
										</el-table-column>
										<el-table-column label="操作" align="center" fixed="right">
											<el-table-column min-width="280" align="center" fixed="right">
												<template #header>
													<el-button @click="searchClick" icon="ele-Search" type="primary" text> 查询 </el-button>
													<el-button @click="resetClick" icon="ele-Refresh" text> 重置 </el-button>
												</template>
												<template #default="scope">
													<el-button @click="detailHandle(scope.row)" class="icon-e" icon="ele-View" size="small" text type="success"> 详情 </el-button>
													<template v-if="$hasPer('AccidentManagement4:create')">
														<el-button v-if="scope.row.n_FlowinstanceState == 0" @click="createWorkFlowClick(scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary">
															创建申请
														</el-button>
													</template>

													<template v-if="$hasPer('AccidentManagement5:withdraw')">
														<el-button v-if="scope.row.n_FlowinstanceState == 1" @click="revocationClick(scope.row.n_Id)" class="icon-e" icon="ele-Close" size="small" text type="success">
															撤回
														</el-button>
													</template>

													<template v-if="$hasPer('AccidentManagement4:create')">
														<el-button v-if="scope.row.n_FlowinstanceState == 3" @click="createWorkFlowClick(scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary">
															重新创建申请
														</el-button>
													</template>

													<template v-if="$hasPer('AccidentManagement2:edit')">
														<el-button
															v-if="scope.row.n_FlowinstanceState == 0 || scope.row.n_FlowinstanceState == 3"
															@click="nodeClick(scope.row)"
															class="icon-e"
															icon="ele-Edit"
															size="small"
															text
															type="primary"
														>
															编辑
														</el-button>
													</template>
													<el-button v-if="$hasPer('AccidentManagement6:file')" size="small" @click="documentClick(scope.row)" text type="primary"> 附件管理 </el-button>
													<el-button v-if="$hasPer('AccidentManagement3:delete')" @click="deleteHandle(scope.row.n_Id, getData)" class="icon-e" icon="ele-Delete" size="small" text type="danger">
														删除
													</el-button>
												</template>
											</el-table-column>
										</el-table-column>
									</el-table>
								</div>
							</div>
							<div style="height: 30px; margin-top: 20px" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
						</div>
					</el-card>
				</div>
			</div>
		</div>
		<!-- 新增and编辑 -->
		<el-dialog draggable :close-on-click-modal="false" :close-on-press-escape="false" v-model="showDialogVisible" :title="saveId ? '编辑' : '新增'" width="50%" @close="cancelUseClick">
			<el-form label-width="80px" ref="ruleFormRef" :model="ruleForm" size="default" :rules="rules">
				<el-divider content-position="left"> 基本信息 </el-divider>
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_CompanyName" label="单位名称">
							<el-input v-model="ruleForm.v_CompanyName" placeholder="单位名称" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="" label="部门名称">
							<el-input v-model="ruleForm.n_DepartmentsName" placeholder="部门名称" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="" label="领导姓名">
							<el-input v-model="ruleForm.n_HelperName" placeholder="领导姓名" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_AccidentAddress" label="事故地点">
							<el-input v-model="ruleForm.v_AccidentAddress" placeholder="事故地点" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="d_AccidentTime" label="事故时间">
							<el-date-picker style="width: 100%" v-model="ruleForm.d_AccidentTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="事故时间" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_AccidentName" label="事故名称">
							<el-input v-model="ruleForm.v_AccidentName" placeholder="事故名称" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="n_DeathNumber" label="死亡人数">
							<el-input v-model="ruleForm.n_DeathNumber" placeholder="死亡人数" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="n_InjuredNumber" label="受伤人数">
							<el-input v-model="ruleForm.n_InjuredNumber" placeholder="受伤人数" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="n_MissingNumber" label="失踪人数">
							<el-input v-model="ruleForm.n_MissingNumber" placeholder="失踪人数" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="" label="备注">
							<el-input v-model="ruleForm.n_Remark" placeholder="备注" clearable type="textarea" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancelUseClick">取消</el-button>
					<el-button type="primary" @click="controlUseClick(ruleFormRef)">确定</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 查看详情 -->
		<el-dialog draggable :close-on-click-modal="false" :close-on-press-escape="false" v-model="showDetailDialogVisible" title="详情" width="50%" @close="cancelDetailClick">
			<el-divider content-position="left"> 基本信息 </el-divider>
			<el-descriptions class="margin-top" :column="2" border min-width="120px">
				<el-descriptions-item>
					<template #label> id </template>
					{{ tableData.n_Id }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 单位名称 </template>
					{{ tableData.v_CompanyName }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 部门名字 </template>
					{{ tableData.n_DepartmentsName }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 领导姓名 </template>
					{{ tableData.n_HelperName }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 事故时间 </template>
					{{ tableData.d_AccidentTime.split(' ')[0] }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 事故地点 </template>
					{{ tableData.v_AccidentAddress }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 事故名称 </template>
					{{ tableData.v_AccidentName }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 死亡人数 </template>
					{{ tableData.n_DeathNumber }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 受伤人数 </template>
					{{ tableData.n_InjuredNumber }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 失踪人数 </template>
					{{ tableData.n_MissingNumber }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 公司负责人签字 </template>
					{{ tableData.companyLeaderName }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 公司负责人签字时间 </template>
					{{ tableData.companyLeaderSignatureTime }}
				</el-descriptions-item>
				<el-descriptions-item span="2">
					<template #label> 公司负责人意见/措施 </template>
					{{ tableData.companyLeaderOpinion }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 安全管理机构负责人 </template>
					{{ tableData.insLeaderName }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 安全管理结构负责人签名时间 </template>
					{{ tableData.insSignatureTime }}
				</el-descriptions-item>
				<el-descriptions-item span="2">
					<template #label> 安全管理结构负责人意见/措施 </template>
					{{ tableData.insOpinion }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 流程实例id </template>
					{{ tableData.l_FlowinstanceId }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 申请人员 </template>
					{{ tableData.l_ApplyEmpId }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 申请时间 </template>
					{{ tableData.d_ApplyTime }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 流程状态 </template>
					{{ options1.find((i) => i.value === tableData.n_FlowinstanceState).label }}
				</el-descriptions-item>
				<el-descriptions-item span="2">
					<template #label> 备注 </template>
					{{ tableData.n_Remark }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 创建时间 </template>
					{{ tableData.createdTime }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 创建人 </template>
					{{ tableData.createdUserName }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 更新时间 </template>
					{{ tableData.updatedTime }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 更新人 </template>
					{{ tableData.updatedUserName }}
				</el-descriptions-item>
			</el-descriptions>
			<el-divider content-position="left"> 附件信息 </el-divider>
			<!-- createdTime  createdUserName-->
			<el-table :data="tableData.v_FilePath" style="width: 100%" border>
				<el-table-column type="index" label="序号" width="100" align="center" />
				<el-table-column prop="createdTime" label="创建时间" align="center" />
				<el-table-column prop="createdUserName" label="创建者" align="center" />
				<el-table-column label="操作" align="center">
					<template #default="scope">
						<el-button @click="viewClick(scope.row)" class="icon-e" text type="success">预览</el-button>
						<el-button @click="downClick(scope.row)" class="icon-e" text type="warning">下载</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<!-- 工作流申请 -->
		<el-dialog draggable :close-on-click-modal="false" :close-on-press-escape="false" v-model="showWorkFlowDialogVisible" title="工作流审批" width="50%" @close="cancelUseClick">
			<el-form label-width="80px" ref="ruleFormRef" :model="ruleForm" size="default" :rules="rules">
				<el-divider content-position="left"> 基本信息 </el-divider>
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_CompanyName" label="单位名称">
							<el-input v-model="ruleForm.v_CompanyName" placeholder="单位名称" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="" label="部门名称">
							<el-input v-model="ruleForm.n_DepartmentsName" placeholder="部门名称" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="" label="领导姓名">
							<el-input v-model="ruleForm.n_HelperName" placeholder="领导姓名" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_AccidentAddress" label="事故地点">
							<el-input v-model="ruleForm.v_AccidentAddress" placeholder="事故地点" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="d_AccidentTime" label="事故时间">
							<el-date-picker style="width: 100%" v-model="ruleForm.d_AccidentTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="事故时间" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_AccidentName" label="事故名称">
							<el-input v-model="ruleForm.v_AccidentName" placeholder="事故名称" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="死亡人数">
							<el-input v-model="ruleForm.n_DeathNumber" placeholder="死亡人数" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="" label="受伤人数">
							<el-input v-model="ruleForm.n_InjuredNumber" placeholder="受伤人数" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="" label="失踪人数">
							<el-input v-model="ruleForm.n_MissingNumber" placeholder="失踪人数" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="" label="备注">
							<el-input v-model="ruleForm.n_Remark" placeholder="备注" clearable type="textarea" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-divider content-position="left"> 工作流审批信息 </el-divider>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<commonProcessTemplate v-if="showWorkFlowDialogVisible" :tempId="typeCode" @modelIdInfo="modelIdInfo" @ueseIdInfo="ueseIdInfo" />
				</el-col>
			</el-form>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancelUseClick">取消</el-button>
					<el-button type="primary" @click="controlWorkFlowClick(ruleFormRef)">确定</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 文件上传下载 -->
		<uploadFile isAccept="" :fileInfo="fileInfo" :isUseDialog="fileDialog" @cancelFileClick="cancelFileClick" @controlFileClick="controlFileClick" @updateData="getData" />
	</div>
</template>

<style lang="scss">
@import '../style/public.scss';
</style>

<style scoped lang="scss">
#friend-merchant-manage {
	.box-f {
		:deep(.el-form-item__label) {
			padding: 0;
		}
	}

	:deep(.el-card__body) {
		height: 100%;
	}

	:deep(.el-card) {
		border: none !important;
	}

	.upload-demo {
		margin-left: 12px;
		margin-top: 2px;
	}

	ul {
		list-style: none;

		li {
			cursor: pointer;

			&:hover {
				color: red;
			}
		}
	}

	.icon-e {
		:deep(.el-icon) {
			margin-right: 0px !important;
		}
	}
}
</style>
